<template>
    <div class="top">
      <h2>欢迎注册</h2>
      <van-form @submit="onSubmit" >
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="请设置您的登入密码"
          :rules="[{ required: true, message: '密码' }]"
        />
        <van-field
          v-model="repassword"
          type="password"
          name="repassword"
          label="确认密码"
          placeholder="请再次确认您的登入密码"
          :rules="[{ required: true, message: '确认登入密码' }]"
        />
        <van-field
          v-model="email"
          name="email"
          label="邮箱"
          placeholder="请输入邮箱号"
          :rules="[{ required: true, message: '邮箱号' }]"
        />

        <van-field
          v-model="sms"
          center
          clearable
          placeholder="请输入邮箱验证码"
        >
          <template #button>
            <van-button size="small" type="primary">发送验证码</van-button>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block color="#87CEFA" plain native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
</template>

<script>
    export default {
        name: "Register",
        data() {
          return {
            username: '',
            password: '',
            repassword: '',
            email:'',
            sms:''
          };
        },
        methods: {
          onSubmit(values) {
            console.log('submit', values.username);
            this.$router.replace({path: '/'});
          },
        },
    }
</script>

<style scoped>
  .top{
    margin: 110px 20px auto;
  }
</style>
